<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery对象</title>
	</head>
	<body>
		<button>测试一</button>
		<button>测试二</button>
		<button id="btn3">测试三</button>
		<button>测试四</button>
		
		<!-- 1.jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
		2.基本行为
			size()/length:包含的DOM元素个数
			[index]/get(index):得到对应位置的DOM元素
			each():遍历包含的所有DOM元素
			index():得到在所在兄弟元素中的下标 -->
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需求:
			// 需求1.统计一共有多少按钮
			// 需求2.取出第2个button的文本
			// 需求3.输出所有button标签的文本
			// 需求4.输出'测试三'按钮是所有按钮中的第几个
			
			// 需求1.统计一共有多少按钮
			var $buttons = $('button')
			// size()/length:包含的DOM元素个数
			// console.log($buttons.size())//应该不能用了
			console.log($buttons.length)
			
			// 需求2.取出第2个button的文本
			// [index]/get(index):得到对应位置的DOM元素
			console.log($buttons[1].innerHTML,$buttons.get(1).innerHTML)
			
			// 需求3.输出所有button标签的文本
			// each():遍历包含的所有DOM元素
			// $buttons.each(function(index,domEle){
			// 	console.log(index,domEle.innerHTML,this)
			// })
			$buttons.each(function(index,domEle){
				console.log(this.innerHTML)
			})
			
			// 需求4.输出'测试三'按钮是所有按钮中的第几个
			// index():得到在所在兄弟元素中的下标
			console.log($('#btn3').index())//2
			
			// 1.伪数组
			// 	Object对象
			// 	length属性
			// 	数组的下标值
			// 没有数组特别的方法:forEach(),push(),pop(),splice()
			
			console.log($buttons instanceof Array)//false
			// 自定义一个伪数组
			var weiArr = {}
			weiArr.length = 0
			weiArr[0] = 'atguigu'
			weiArr.length = 1
			weiArr[1] = 123
			weiArr.length = 2
			for(var i=0;i<weiArr.length;i++){
				var obj = weiArr[i]
				console.log(i,obj)
			}
			console.log(weiArr.forEach,$buttons.forEach)//undefined undefined
		</script>
	</body>
</html>
